<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
    <link rel="stylesheet" href="./css/public.css"type="text/css"media="all">
    <script type="text/javascript" src="./js/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="ground">
        <div class="banner">
             <!--甘牧霖199010232-->
            <div class="banner_title">
                <h2>手机</h2>
                <a href="">查看更多 >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </div>

            <div class="banner_content">
                <a href="">
                    <div class="banner_left">
                        <img src="img/ad1.png" height="740px" >
                    </div>
                </a>  

                <div class="banner_right" id="root">
                    <ul>
                        <li v-for="(item,index) in phoneList">
                            <a href="">
                                <img :src="item.img" alt="">
                                <h1>
                                    {{item.title}}
                                </h1>
                                <h3 style="color: #cccccc;">
                                    {{item.des}}
                                </h3>    
                                <h4 style="color: #f00;">
                                        {{item.price}}
                                </h4>
                            </a>    
                        </li>
                    </ul>
                </div>

            </div> 
        </div>   
    </div>    
        <script>
        const app = Vue.createApp({
                data(){
                    return{
                        phoneList:[
                        {
                            id:'1',img:'./img/phone1.png',title:'Redmi K50 电竞版',des:'全线拉满的冷血旗舰',
                        price:'3299元起'
                        },
                        {
                            id:'2',img:'./img/phone2.png',title:'Xiaomi 12 Pro',des:'全新骁龙8 | 2K AMOLED屏幕',
                        price:'4699元起'
                        },
                        {
                            id:'3',img:'./img/phone3.png',title:'Xiaomi 12',des:'全新骁龙8 | 5000万主摄',
                        price:'3699元起'
                        },
                        {
                            id:'4',img:'./img/phone4.png',title:'Xiaomi 12X',des:'骁龙870 | 5000万主摄',
                        price:'2999元起'
                        },
                        {
                            id:'5',img:'./img/phone5.png',title:'Xiaomi 11 青春活力版',des:'轻薄5G，内外皆出彩',
                        price:'1899元起'
                        },
                        {
                            id:'6',img:'./img/phone6.png',title:'Redmi Note 11 Pro系列',des:'三星AMOLED高刷屏',
                        price:'1799元起'
                        },
                        {
                            id:'7',img:'./img/phone7.png',title:'Redmi Note 11 5G',des:'5000mAh大电量',
                        price:'1199元起'
                        },
                        {
                            id:'8',img:'./img/phone8.png',title:'Redmi Note 11 4G',des:'5000mAh大电量',
                        price:'969元起'
                        },
                        ]
                    }
                },
            
            }).mount('#root');
        </script>
        
</body>
</html>